<template>
  <div class="wrapper">
    <my-nav-bar title="my-UI" fixed></my-nav-bar>
    <div class="wrapper-main">
      <ul v-for="preItem in navLists" :key="preItem.name">
        <my-cell>{{preItem.title}}</my-cell>
        <my-cell
          v-for="item in preItem.subLists"
          :key="item.id"
          @click="goTo(item.path)"
        >{{item.title}}</my-cell>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      navLists: [
        {
          title: "基础组件",
          name: "base",
          subLists: [
            { id: "1", title: "button", path: "/button" },
            { id: "2", title: "layout", path: "/layout" },
            { id: "3", title: "tag", path: "/tag" },
            { id: "4", title: "numberKeyboard", path: "/numberKeyboard" },
            { id: "5", title: "switch", path: "/mySwitch" },
            { id: "6", title: "step", path: "/step" },
            { id: "7", title: "rate", path: "/rate" },
            { id: "8", title: "countup", path: "/countup" },
            { id: "9", title: "popup", path: "/popup" },
            { id: "10", title: "datePicker", path: "/datePicker" },
            { id: "11", title: "badge", path: "/badge" },

            { id: "12", title: "calendar", path: "/calendar" },
            { id: "13", title: "recursive", path: "/recursive" },
            //  https://blog.csdn.net/mongo_node/article/details/78884284
            { id: "14", title: "treeMenu", path: "/treeMenu" }
          ]
        }
      ],
      activeName: "",
      datetime0: ""
    };
  },

  methods: {
    goTo(path) {
      this.$router.$push(path);
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  &-main {
    padding-top: 46px;
    width: 100%;
  }
}

* {
  margin: 0;
  padding: 0;
}

.message {
  width: 60%;
  margin: 0 10px;
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border-radius: 5px;
  border: 1px solid #b3d33f;
}

.form {
  width: 100%;
  position: fixed;
  bottom: 300px;
  left: 0;
}

.connect {
  height: 40px;
  vertical-align: top;
  /* padding: 0; */
  width: 80px;
  font-size: 20px;
  border-radius: 5px;
  border: none;
  background: #b3d33f;
  color: #fff;
}
</style>
